import { Aiui } from "../static";

/**
 * 给元素添加过渡属性
 */
var transition = function(elem,options){
    var that = this;
    if(typeof options === "string"){
        var name = options;
        options = {};
        options.name = name;
    }
    //配置文件
    that.config = Aiui.extend({},{
        name:'fade',
        duration:'300',//过渡CSS的时间
        onenter:'',
        onenteractive:'',
        onleave:'',
        onleaved:'',
        onleaveactive:'',
        onentered:''
    },options);
    that.dom = elem;//要控制的document
    that.isShow = Aiui.css(elem,'display') !=='none' ? true : false;//初始化时是否是显示状态
    that.oldDisplay = Aiui.css(elem,'display');//原始的display属性
    return that;
}
/**
 * 显示方法
 */
transition.prototype.show = function(classname){
    var that = this,showTime = parseInt(that.config.duration)+(1000/60*4),dom = that.dom;
    classname = classname ? classname : that.config.name;
    //为了防止点太快，先清除
    Aiui.removeClass(dom,classname+'-leave-to');
    Aiui.removeClass(dom,classname+'-leave-active');
    cancelAnimationFrame(that.first);
    cancelAnimationFrame(that.second);
    cancelAnimationFrame(that.third);
    clearTimeout(that.timer);
    that.first = requestAnimationFrame(function(){
        Aiui.addClass(dom,classname+'-enter');
        Aiui.addClass(dom,classname+'-enter-active')
        that.expectedState = true;
        if(typeof that.config.onenter==="function"){
            that.config.onenter.call();
        }
        that.second = requestAnimationFrame(function(){
            Aiui.css(dom,'display','block');//显示
            that.third = requestAnimationFrame(function(){
                Aiui.addClass(dom,classname+'-enter-to');
                Aiui.removeClass(dom,classname+'-enter');
                if(typeof that.config.onenteractive==="function"){
                    that.config.onenteractive.call();
                }
            })
            that.timer = setTimeout(function(){
                Aiui.removeClass(dom,classname+'-enter-to');
                Aiui.removeClass(dom,classname+'-enter-active');
                if(typeof that.config.onentered === "function"){
                    that.config.onentered.call();
                }
            }, showTime);
        })
    })
    that.isShow = true;
}

/**
 * 隐藏方法
 */
transition.prototype.hide = function(classname){
    var that = this,hideTime = parseInt(that.config.duration)-(1000/60*3),dom = that.dom;
    classname = classname ? classname : that.config.name;
    //为了防止点太快，先清除
    Aiui.removeClass(dom,classname+'-enter-to');
    Aiui.removeClass(dom,classname+'-enter-active');
    cancelAnimationFrame(that.first);
    cancelAnimationFrame(that.second);
    cancelAnimationFrame(that.third);
    clearTimeout(that.timer);
    that.first = requestAnimationFrame(function(){
        Aiui.addClass(dom,classname+'-leave');
        Aiui.addClass(dom,classname+'-leave-active');
        if(typeof that.config.onleave==="function"){
            that.config.onleave.call();
        }
        that.second = requestAnimationFrame(function(){
            Aiui.css(dom,'display','block');//显示
            that.third = requestAnimationFrame(function(){
                Aiui.addClass(dom,classname+'-leave-to');
                Aiui.removeClass(dom,classname+'-leave');
                if(typeof that.config.onleaveactive==="function"){
                    that.config.onleaveactive.call();
                }
            })
            that.timer = setTimeout(function(){
                Aiui.removeClass(dom,classname+'-leave-to');
                Aiui.removeClass(dom,classname+'-leave-active');
                Aiui.css(dom,'display','none');
                if(typeof that.config.onleaved === "function"){
                    that.config.onleaved.call();
                }
            }, hideTime);
        })
    })
    that.isShow = false;
}

/**
 * 自动识别显示或者隐藏
 */
transition.prototype.toggle = function(state){
    if ( typeof state === "boolean" ) {
        return state ? this.show() : this.hide();
    }
    if(this.isShow){
        this.hide();
    }else{
        this.show();
    }
}
/**
 * 给指定document添加过渡属性
 * @param {Document} dom 要添加属性的名称
 * @param {Object} options 额外属性
 */
export default function(dom,options){
    return new transition(dom,options);
};